<template>
  <!-- vue2.0 需要根元素， vue3.0可以是代码片段 -->
  <div>
    App
    <p>{{ $store.state.username }}</p>
    <p>{{ $store.getters.newName }}</p>
    <button @click="mutationsFn">mutationsFn</button>
  </div>
  <!-- <p>1</p> -->
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup() {
    const store = useStore()

    console.log(store.state.username)

    console.log(store.getters.newName)

    const mutationsFn = () => {
      store.dispatch('updateName')
    }

    return { mutationsFn }
  }
}
</script>

<style lang="less"></style>
